<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      min-height: 100vh;
      background: radial-gradient(ellipse at top, #1e293b, #0f172a);
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      perspective: 1200px;
      overflow: hidden;
    }

    /* Controls Panel */
    .controls {
      position: fixed;
      top: 20px;
      right: 20px;
      background: rgba(15, 23, 42, 0.9);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(99, 102, 241, 0.2);
      border-radius: 12px;
      padding: 20px;
      z-index: 1000;
      width: 280px;
    }

    .control-group {
      margin-bottom: 20px;
    }

    .control-group:last-child {
      margin-bottom: 0;
    }

    .control-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: rgba(148, 163, 184, 0.9);
      margin-bottom: 8px;
      display: block;
      font-weight: 600;
    }

    .control-row {
      display: flex;
      align-items: center;
      margin-bottom: 6px;
    }

    .axis-label {
      width: 20px;
      font-size: 10px;
      color: rgba(99, 102, 241, 0.8);
      font-weight: 600;
    }

    input[type="range"] {
      flex: 1;
      margin: 0 8px;
      height: 4px;
      -webkit-appearance: none;
      appearance: none;
      background: rgba(99, 102, 241, 0.2);
      border-radius: 2px;
      outline: none;
    }

    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 12px;
      height: 12px;
      background: linear-gradient(135deg, #6366f1, #8b5cf6);
      border-radius: 50%;
      cursor: pointer;
    }

    input[type="range"]::-moz-range-thumb {
      width: 12px;
      height: 12px;
      background: linear-gradient(135deg, #6366f1, #8b5cf6);
      border-radius: 50%;
      cursor: pointer;
      border: none;
    }

    .value-display {
      width: 35px;
      font-size: 10px;
      color: rgba(226, 232, 240, 0.9);
      text-align: right;
    }

    .scene {
      transform-style: preserve-3d;
      position: relative;
      width: 600px;
      height: 400px;
      transform: translateY(50px);
    }

    /* Grid Background */
    .grid {
      position: absolute;
      width: 4000px;
      height: 4000px;
      left: -2000px;
      top: -2000px;
      transform: translateZ(-300px);
      background-image: 
        linear-gradient(rgba(99, 102, 241, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.1) 1px, transparent 1px);
      background-size: 50px 50px;
    }

    /* Layer Base Styles */
    .layers-container {
      transform-style: preserve-3d;
      width: 100%;
      height: 100%;
    }

    .layer {
      position: absolute;
      width: 600px;
      height: 276px;
      border-radius: 16px;
      padding: 30px;
      transform-style: preserve-3d;
    }

    /* Top Layer - Textarea */
    .textarea-layer {
      transform: translateZ(150px);
      background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.05));
      border: 2px dashed rgba(99, 102, 241, 0.3);
      backdrop-filter: blur(10px);
      box-shadow: 
        0 20px 40px rgba(99, 102, 241, 0.1),
        inset 0 0 60px rgba(99, 102, 241, 0.05);
    }

    /* Bottom Layer - Preview */
    .preview-layer {
      transform: translateZ(-50px);
      background: linear-gradient(135deg, #ffffff, #f8fafc);
      border: 1px solid rgba(226, 232, 240, 0.8);
      box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.2),
        0 0 100px rgba(99, 102, 241, 0.1);
    }

    /* Content Styling */
    .markdown-text {
      font-family: 'SF Mono', 'Monaco', monospace;
      font-size: 14px;
      line-height: 18px;
      color: #b1aade;
      text-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
    }

    .markdown-text .heading {
      /*color: rgba(99, 102, 241, 0.8);*/
    }

    .markdown-text .bold {
      /*color: rgba(139, 92, 246, 0.8);*/
    }

    .markdown-text .code {
      /*color: rgba(236, 72, 153, 0.8);*/
      /*background: rgba(236, 72, 153, 0.1);*/
      padding: 2px 4px;
      border-radius: 3px;
    }

    .cursor {
      display: inline-block;
      width: 2px;
      height: 18px;
      background: linear-gradient(180deg, #6366f1, #8b5cf6);
      margin-left: 2px;
      box-shadow: 0 0 10px #6366f1;
    }

    .rendered-content h1 {
      color: #d65820;
      font-size: 14px;
      font-weight: 700;
/*      background: linear-gradient(135deg, #1e293b, #334155);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;*/
      margin-bottom: 12px;
    }

    .rendered-content p {
      color: #475569;
      font-size: 14px;
      line-height: 24px;
      margin-bottom: 12px;
    }

    .rendered-content strong {
      color: #1e293b;
      font-weight: 600;
    }

    .rendered-content code {
      background: linear-gradient(135deg, #fce7f3, #f9a8d4);
      color: #be185d;
      padding: 3px 8px;
      border-radius: 6px;
      font-family: 'SF Mono', monospace;
      font-size: 14px;
    }

    .rendered-content li {
      color: #64748b;
      margin-left: 20px;
      margin-bottom: 8px;
    }

    /* Labels */
    .label {
      position: absolute;
      padding: 10px 20px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      transform-style: preserve-3d;
    }

    .label-textarea {
      top: -40px;
      left: 30px;
      background: linear-gradient(135deg, rgba(99, 102, 241, 0.9), rgba(139, 92, 246, 0.9));
      color: white;
      transform: translateZ(150px) translateY(-15px);
      box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);

      padding: 10px 24px 12px;
      font-size: 14px;
    }

    .label-preview {
      bottom: -40px;
      left: 50px;
      background: linear-gradient(135deg, rgba(236, 72, 153, 0.9), rgba(244, 114, 182, 0.9));
      color: white;
      transform: translateZ(-20px);
      box-shadow: 0 10px 30px rgba(236, 72, 153, 0.3);

      padding: 13px 26px;
      font-size: 15px;
      transform: translateZ(-30px) translateY(12px);
    }

    /* Tech Details */
    .tech-labels {
      transform-style: preserve-3d;
    }

    .tech-detail {
      position: absolute;
      font-size: 10px;
      color: rgba(148, 163, 184, 0.7);
      font-family: 'SF Mono', monospace;
      background: rgba(15, 23, 42, 0.8);
      padding: 6px 10px;
      border-radius: 4px;
      border: 1px solid rgba(99, 102, 241, 0.2);
      white-space: nowrap;
    }

    .detail1 {
      top: 50px;
      right: -180px;
    }

    .detail2 {
      bottom: 120px;
      left: -140px;
    }

    .detail1::before,
    .detail2::before {
      content: '';
      position: absolute;
      width: 40px;
      height: 1px;
      background: rgba(99, 102, 241, 0.3);
      top: 50%;
    }

    .detail1::before {
      left: -40px;
    }

    .detail2::before {
      right: -40px;
    }

    /* Static Glow Effects */
    .glow {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 16px;
      pointer-events: none;
      opacity: 0.5;
      box-shadow: 
        inset 0 0 50px rgba(99, 102, 241, 0.1),
        0 0 100px rgba(99, 102, 241, 0.05);
    }
  </style>
</head>
<body>
  <!-- Controls Panel -->
  <div class="controls">
    <button style="position: absolute; top: 10px; right: 10px; font-size: 16px; background: transparent; color: #fff; border: none; cursor: pointer;" onclick="this.parentElement.remove()">&times;</button>
    <div class="control-group">
      <label class="control-label">Grid Rotation</label>
      <div class="control-row">
        <span class="axis-label">X</span>
        <input type="range" id="gridX" min="-180" max="180" value="34">
        <span class="value-display" id="gridXVal">-6°</span>
      </div>
      <div class="control-row">
        <span class="axis-label">Y</span>
        <input type="range" id="gridY" min="-180" max="180" value="7">
        <span class="value-display" id="gridYVal">7°</span>
      </div>
      <div class="control-row">
        <span class="axis-label">Z</span>
        <input type="range" id="gridZ" min="-180" max="180" value="-18">
        <span class="value-display" id="gridZVal">-18°</span>
      </div>
    </div>

    <div class="control-group">
      <label class="control-label">Layers Rotation</label>
      <div class="control-row">
        <span class="axis-label">X</span>
        <input type="range" id="layersX" min="-180" max="180" value="25">
        <span class="value-display" id="layersXVal">33°</span>
      </div>
      <div class="control-row">
        <span class="axis-label">Y</span>
        <input type="range" id="layersY" min="-180" max="180" value="43">
        <span class="value-display" id="layersYVal">28°</span>
      </div>
      <div class="control-row">
        <span class="axis-label">Z</span>
        <input type="range" id="layersZ" min="-180" max="180" value="-23">
        <span class="value-display" id="layersZVal">-34°</span>
      </div>
    </div>

    <div class="control-group">
      <label class="control-label">Input Layer Position</label>
      <div class="control-row">
        <span class="axis-label">X</span>
        <input type="range" id="inputX" min="-200" max="200" value="0">
        <span class="value-display" id="inputXVal">0px</span>
      </div>
      <div class="control-row">
        <span class="axis-label">Y</span>
        <input type="range" id="inputY" min="-200" max="200" value="-26">
        <span class="value-display" id="inputYVal">0px</span>
      </div>
      <div class="control-row">
        <span class="axis-label">Z</span>
        <input type="range" id="inputZ" min="-200" max="400" value="120">
        <span class="value-display" id="inputZVal">150px</span>
      </div>
    </div>

    <div class="control-group">
      <label class="control-label">Glass Effect</label>
      <div class="control-row">
        <span class="axis-label" style="width: 80px; text-align: left;">Transparency</span>
        <input type="range" id="glassOpacity" min="0" max="100" value="19">
        <span class="value-display" id="glassOpacityVal">0%</span>
      </div>
      <div class="control-row">
        <span class="axis-label" style="width: 80px; text-align: left;">Blur</span>
        <input type="range" id="glassBlur" min="0" max="30" value="3">
        <span class="value-display" id="glassBlurVal">3px</span>
      </div>
      <div class="control-row">
        <span class="axis-label" style="width: 80px; text-align: left;">Color</span>
        <input type="color" id="glassColor" value="#ffffff" style="width: 60px; height: 20px; border: none; border-radius: 4px; cursor: pointer;">
        <input type="range" id="glassColorIntensity" min="0" max="100" value="30" style="flex: 1; margin-left: 8px;">
        <span class="value-display" id="glassColorVal">30%</span>
      </div>
      <div class="control-row">
        <span class="axis-label" style="width: 80px; text-align: left;">Outline</span>
        <input type="range" id="glassOutline" min="0" max="10" value="2">
        <span class="value-display" id="glassOutlineVal">2px</span>
      </div>
    </div>
  </div>

  <div class="scene">
    <!-- Grid Floor -->
    <div class="grid" id="grid"></div>

    <!-- Layers Container -->
    <div class="layers-container" id="layersContainer">
      <!-- Top Layer - Invisible Textarea -->
      <div class="layer textarea-layer">
        <div class="label label-textarea">Invisible Textarea</div>
        <div class="markdown-text">
          <span class="heading"># Welcome to the editor</span><span class="cursor"></span><br>
          <br>
          This is <span class="bold">**bold text**</span> and *italic*<br><br>
          Here's some <span class="code">`inline code`</span><br>
          <br>
          - First item<br>
          - Second item<br>
          - Third item
        </div>
        <div class="glow"></div>
      </div>

      <!-- Bottom Layer - Styled Preview -->
      <div class="layer preview-layer">
        <div class="label label-preview">Rendered Markdown</div>
        <div class="rendered-content">
          <h1># Welcome to the editor</h1>
          <p>This is <strong>**bold text**</strong> and <em>*italic*</em></p>
          <p>Here's some <code>`inline code`</code></p>
          <ul>
            <li>First item</li>
            <li>Second item</li>
            <li>Third item</li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <script>
    // Grid rotation controls
    const gridX = document.getElementById('gridX');
    const gridY = document.getElementById('gridY');
    const gridZ = document.getElementById('gridZ');
    const grid = document.getElementById('grid');

    // Layers rotation controls
    const layersX = document.getElementById('layersX');
    const layersY = document.getElementById('layersY');
    const layersZ = document.getElementById('layersZ');
    const layersContainer = document.getElementById('layersContainer');

    // Input layer position controls
    const inputX = document.getElementById('inputX');
    const inputY = document.getElementById('inputY');
    const inputZ = document.getElementById('inputZ');

    // Glass effect controls
    const glassOpacity = document.getElementById('glassOpacity');
    const glassBlur = document.getElementById('glassBlur');
    const glassColor = document.getElementById('glassColor');
    const glassColorIntensity = document.getElementById('glassColorIntensity');
    const glassOutline = document.getElementById('glassOutline');
    const textareaLayer = document.querySelector('.textarea-layer');

    // Update grid rotation
    function updateGrid() {
      const x = gridX.value;
      const y = gridY.value;
      const z = gridZ.value;
      grid.style.transform = `rotateX(${x}deg) rotateY(${y}deg) rotateZ(${z}deg) translateZ(-300px)`;
      document.getElementById('gridXVal').textContent = x + '°';
      document.getElementById('gridYVal').textContent = y + '°';
      document.getElementById('gridZVal').textContent = z + '°';
    }

    // Update layers rotation
    function updateLayers() {
      const x = layersX.value;
      const y = layersY.value;
      const z = layersZ.value;
      layersContainer.style.transform = `rotateX(${x}deg) rotateY(${y}deg) rotateZ(${z}deg)`;
      document.getElementById('layersXVal').textContent = x + '°';
      document.getElementById('layersYVal').textContent = y + '°';
      document.getElementById('layersZVal').textContent = z + '°';
    }

    // Update input layer position
    function updateInputPosition() {
      const x = inputX.value;
      const y = inputY.value;
      const z = inputZ.value;
      textareaLayer.style.transform = `translateX(${x}px) translateY(${y}px) translateZ(${z}px)`;
      document.getElementById('inputXVal').textContent = x + 'px';
      document.getElementById('inputYVal').textContent = y + 'px';
      document.getElementById('inputZVal').textContent = z + 'px';
    }

    // Convert hex to RGB
    function hexToRgb(hex) {
      const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
      return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
      } : null;
    }

    // Update glass effect
    function updateGlass() {
      const opacity = glassOpacity.value / 100;
      const blur = glassBlur.value;
      const color = hexToRgb(glassColor.value);
      const colorIntensity = glassColorIntensity.value / 100;
      const outline = glassOutline.value;
      
      const bgColor1 = `rgba(${color.r}, ${color.g}, ${color.b}, ${opacity * colorIntensity})`;
      const bgColor2 = `rgba(${Math.min(255, color.r + 40)}, ${Math.min(255, color.g + 40)}, ${Math.min(255, color.b + 40)}, ${opacity * colorIntensity})`;
      const borderColor = `rgba(${color.r}, ${color.g}, ${color.b}, 0.3)`;
      
      textareaLayer.style.background = `linear-gradient(135deg, ${bgColor1}, ${bgColor2})`;
      textareaLayer.style.backdropFilter = `blur(${blur}px)`;
      textareaLayer.style.webkitBackdropFilter = `blur(${blur}px)`;
      textareaLayer.style.border = outline > 0 ? `2px solid #598efb80` : 'none';
      
      document.getElementById('glassOpacityVal').textContent = glassOpacity.value + '%';
      document.getElementById('glassBlurVal').textContent = blur + 'px';
      document.getElementById('glassColorVal').textContent = glassColorIntensity.value + '%';
      document.getElementById('glassOutlineVal').textContent = outline + 'px';
    }

    // Add event listeners
    gridX.addEventListener('input', updateGrid);
    gridY.addEventListener('input', updateGrid);
    gridZ.addEventListener('input', updateGrid);

    layersX.addEventListener('input', updateLayers);
    layersY.addEventListener('input', updateLayers);
    layersZ.addEventListener('input', updateLayers);

    inputX.addEventListener('input', updateInputPosition);
    inputY.addEventListener('input', updateInputPosition);
    inputZ.addEventListener('input', updateInputPosition);

    glassOpacity.addEventListener('input', updateGlass);
    glassBlur.addEventListener('input', updateGlass);
    glassColor.addEventListener('input', updateGlass);
    glassColorIntensity.addEventListener('input', updateGlass);
    glassOutline.addEventListener('input', updateGlass);

    // Set initial values
    updateGrid();
    updateLayers();
    updateInputPosition();
    updateGlass();
  </script>
</body>
</html>